import React, { useState } from 'react';
import { Card, Table, Button, Space, Input, Select, Row, Col, Tag } from 'antd';
import { SearchOutlined, EnvironmentOutlined } from '@ant-design/icons';
import './index.less';

const { Option } = Select;

const Organization: React.FC = () => {
  const [searchValue, setSearchValue] = useState('');
  
  // 模拟数据
  const orgData = [
    {
      id: '1',
      name: '四川大学华西医院',
      code: '984946',
      address: '成都市武侯区国学巷37号',
      principal: '张伟',
      phone: '02885422222',
      level: '三级甲等',
      status: '可用',
      introduction: '四川大学华西医院创建于1892年，是我国历史悠久的西医院之一，是国家卫健委委属医院...',
      image: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png'
    },
    {
      id: '2',
      name: '成都市第一人民医院',
      code: '999999',
      address: '成都市高新南区红星路一段44号',
      principal: '李强',
      phone: '02868188888',
      level: '三级甲等',
      status: '可用',
      introduction: '成都市第一人民医院创建于1945年，是一所集医疗、教学、科研、预防、保健、康复为一体的大型综合医院...',
      image: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png'
    },
    {
      id: '3',
      name: '成都市第二人民医院',
      code: '888888',
      address: '成都市庆云南街10号',
      principal: '王芳',
      phone: '02886353123',
      level: '三级甲等',
      status: '可用',
      introduction: '成都市第二人民医院始建于1946年，是一所以"胸痛、胸外、肺病"为特色专科的三级甲等综合医院...',
      image: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png'
    },
    {
      id: '4',
      name: '四川省人民医院',
      code: '12345678',
      address: '成都市青羊区一环路西二段32号',
      principal: '赵明',
      phone: '02887393999',
      level: '三级甲等',
      status: '可用',
      introduction: '四川省人民医院始建于1941年，是一所集医疗、教学、科研、预防、保健和康复为一体的大型现代化综合性三级甲等医院...',
      image: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png'
    },
    {
      id: '5',
      name: '成都中医药大学附属医院',
      code: '98765432',
      address: '成都市金牛区十二桥路39号',
      principal: '陈华',
      phone: '02887783120',
      level: '三级甲等',
      status: '可用',
      introduction: '成都中医药大学附属医院创建于1956年，是一所以中医药为特色的大型现代化综合性三级甲等医院...',
      image: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png'
    }
  ];
  
  // 表格列定义
  const columns = [
    {
      title: '机构名称',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => (
        <div className="org-name-cell">
          <img src={record.image} alt={text} className="org-image" />
          <div>
            <div className="org-name">{text}</div>
            <div className="org-address">
              <EnvironmentOutlined style={{ color: '#1890ff', marginRight: 5 }} />
              {record.address}
            </div>
          </div>
        </div>
      )
    },
    {
      title: '机构代码',
      dataIndex: 'code',
      key: 'code',
      width: 120
    },
    {
      title: '负责人',
      dataIndex: 'principal',
      key: 'principal',
      width: 100
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
      width: 150,
      render: (text) => (
        <span>📞 {text}</span>
      )
    },
    {
      title: '机构级别',
      dataIndex: 'level',
      key: 'level',
      width: 120
    },
    {
      title: '有效状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (text) => (
        <Tag color="success">{text}</Tag>
      )
    },
    {
      title: '简介',
      dataIndex: 'introduction',
      key: 'introduction',
      ellipsis: true
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      render: (_, record) => (
        <Space size="middle">
          <a className="link-blue">查看</a>
          <a className="link-blue">编辑</a>
        </Space>
      ),
    },
  ];

  return (
    <div className="organization-container">
      <Card title="机构列表" bordered={false}>
        <div className="search-container">
          <Row gutter={16} align="middle">
            <Col span={8}>
              <Input 
                placeholder="机构名称/地址/机构代码" 
                value={searchValue}
                onChange={(e) => setSearchValue(e.target.value)}
                prefix={<SearchOutlined />}
                allowClear
              />
            </Col>
            <Col span={4}>
              <Select defaultValue="可用" style={{ width: '100%' }}>
                <Option value="可用">可用</Option>
                <Option value="停用">停用</Option>
                <Option value="全部">全部</Option>
              </Select>
            </Col>
            <Col>
              <Button type="primary">查询</Button>
            </Col>
          </Row>
        </div>
        <Table 
          columns={columns}
          dataSource={orgData}
          rowKey="id"
          pagination={{ pageSize: 10 }}
        />
      </Card>
    </div>
  );
};

export default Organization; 
